$(document).ready(function(e) {
    $(window).resize(function(){
		scrollChange();
	});
	scrollChange();
	function scrollChange(){
		/*$('body').append('<div id="overlay">offsetTop: <span id="offsetTop"></span><br/>scrollTop: <span id="scrollTop"></span><br/>window: <span id="window"></span><br/>parents: <span id="parents"></span></div>');
		$('#overlay').css({position: 'fixed', 'z-index': '1000', top: '30px', left: '20px', color: '#fff', background: '#000'});*/
		var selector = $(".list-controls");
		var offsetTop = null;
		var target_w = selector.width();
		var scrollTop = $(window).scrollTop() + $(window).innerHeight();	
		$(window).scroll(function(){
			if(offsetTop == null){
				offsetTop = selector.offset().top + selector.innerHeight();
			}
			scrollTop = $(this).scrollTop() + $(this).innerHeight();			
			fixedListcontrol(selector, scrollTop, offsetTop, target_w);	
			/*$('#offsetTop').empty().append(offsetTop);
			$('#scrollTop').empty().append(scrollTop);
			$('#window').empty().append($(window).innerHeight());
			$('#parents').empty().append(selector.parents().offset().top);*/
		});
	}
	function fixedListcontrol(selector,scrollTop, offsetTop, target_w){
		if (scrollTop < offsetTop){
			selector.css({position: "fixed", 'z-index': "1000", bottom: "0", 'box-shadow': "2px 0 6px #CCCCCC", 'background-color': "#FFF", width: target_w+"px"});
		}else{
			selector.removeAttr('style');
		}
		
	}
});